import $ from 'jquery';
export default {
    resize() {
        Vue.directive('resize', {
            inserted(el, bindings) {
                if (!bindings.value.fun) {
                    return;
                }
                const resizeObserver = new ResizeObserver(entries => {
                    bindings.value.fun();
                    //回调
                });
                //监听对应的dom
                resizeObserver.observe(el);
            },
        });
    },
    tooltip() {
        Vue.directive('tip', {
            inserted(el, bindings) {
                if (!bindings.value.show) {
                    return;
                }

                let tipHover = false;
                let elHover = false;
                let tipDiv = document.createElement('div');
                tipDiv.style.position = 'absolute';
                tipDiv.style['z-index'] = '700000';
                tipDiv.className = 'sept-tip';
                // tipDiv.innerText = bindings.value.title;

                $(tipDiv).hover(
                    () => {
                        tipHover = true;
                    },
                    () => {
                        tipHover = false;
                        setTimeout(() => {
                            if (elHover || tipHover) return;
                            $(tipDiv).closest('#app').length && $('body').children('#app')[0].removeChild(tipDiv);
                        }, 17);
                    }
                );
                $(el).hover(
                    () => {
                        elHover = true;
                        tipDiv.innerText = el.getAttribute('data-title') || el.innerText;
                        if ($(window).width() / 2 > $(el).offset().left && $(window).height() / 2 > $(el).offset().top) {
                            tipDiv.style.bottom = '';
                            tipDiv.style.right = '';
                            tipDiv.style.top = `${$(el).offset().top + $(el).height() + 2}px`;
                            tipDiv.style.left = `${$(el).offset().left}px`;
                        } else if ($(window).width() / 2 > $(el).offset().left && $(window).height() / 2 < $(el).offset().top) {
                            tipDiv.style.top = '';
                            tipDiv.style.right = '';
                            tipDiv.style.bottom = `${$(window).height() - $(el).offset().top + 2}px`;
                            tipDiv.style.left = `${$(el).offset().left}px`;
                        } else if ($(window).width() / 2 < $(el).offset().left && $(window).height() / 2 > $(el).offset().top) {
                            tipDiv.style.bottom = '';
                            tipDiv.style.left = '';
                            tipDiv.style.top = `${$(el).offset().top + $(el).height() + 2}px`;
                            tipDiv.style.right = `${$(window).width() - $(el).offset().left - $(el).width()}px`;
                        } else {
                            tipDiv.style.top = '';
                            tipDiv.style.left = '';
                            tipDiv.style.bottom = `${$(window).height() - $(el).offset().top + 2}px`;
                            tipDiv.style.right = `${$(window).width() - $(el).offset().left - $(el).width()}px`;
                        }
                        $('body').children('#app')[0].appendChild(tipDiv);
                        // tipDiv.style["max-width"] = $(el).width() + "px";
                        // tipDiv.style["max-height"] = "300px";
                    },
                    () => {
                        elHover = false;
                        setTimeout(() => {
                            if (elHover || tipHover) return;
                            $(tipDiv).closest('#app').length && $('body').children('#app')[0].removeChild(tipDiv);
                        }, 17);
                    }
                );
            },
            unbind() {
                $('.sept-tip').each(node => {
                    $('body').children('#app')[0].removeChild($('.sept-tip')[node]);
                });
            },
            update(el, bindings) {},
        });
    },
};
